*{

    margin: 0;

    padding: 0;

}

.page{

    width: 100%;

    margin: auto;

}

/*banner区域*/

.swiper {

    width: 100%;

    height: auto;

    position: relative;

    z-index: 1;

}

.swiper-slide img{

    width: 100%;

    height: 100%;

}

/*产品中心*/

.pro-text{

    text-align: center;

    padding: 86px;

    line-height: 45px;

}

.pro-text .title{

    color: #303133;

    font-size: 24px;

    font-weight: bold;

}

.pro-text span{

    color: #A0A3A8;

    font-size: 16px;

}

.matter{

    display: flex;

    align-items: center;

    justify-content: flex-start;

    flex-wrap: wrap;

    line-height: 50px;

    margin: 40px 0 0 30px;

}

.img{

    margin-left: 20px;

    cursor: pointer;

    transition: all .6s ease 0s;

}

.img img{

    width: 260px;

    height: 155px;

}

.img:hover{

    transform: scale(1.4);

}

.product{

    background-color: #F9F9F9;

    padding-bottom: 86px;

}

.center{

    display: flex;

    align-items: center;

    justify-content: space-around;

    width: 1000px;

    margin-left: auto;

    margin-right: auto;

}

.center:hover{

}

.one:hover{

    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .3);

    transition: all .2s ease-in-out;

}

.left:hover{

    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .3);

    transition: all .2s ease-in-out;

    cursor: pointer;

}

.center .left{

    width: 235px;

    height: 420px;

    display: flex;

    flex-direction: column;

}

.center .left .up{

    width: 100%;

    height: 210px;

    background-color: #2469F3;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #FFFFFF;

    line-height: 40px;

    flex-direction: column;

}

.center .left .up .myb{

    font-size: 18px;

    font-weight: bold;

}

.center .left .up .every{

    color: #EAEFFD;

    font-size: 15px;

}

.center .left .down{

    width: 100%;

    height: 210px;

}

.center .left .down img{

    width: 100%;

    height: 100%;

}

.center .right{

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    flex: 1;

    flex-wrap: wrap;

    height: 420px;

    align-content: space-between;

}

.center .right .one{

    width: 235px;

    height: 200px;

    margin-left: 20px;

    display: flex;

    flex-direction: column;

    background-color: #FFFFFF;

    cursor: pointer;

    /*box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .1)*/

}

.center .right .one .play{

    display: flex;

    align-items: center;

    justify-content: flex-start;

}

.center .right .one .play img{

    width: 27px;

    height: 24px;

    margin: 16px;

}

.center .right .one .play .cloud{

    font-size: 20px;

    font-weight: bold;

    text-align: center;

}

.center .right .one .line{

    padding: 0 20px 16px;

    height: 1px;

    background-color: #EDEFF2;

    background-clip: content-box;

}

.center .right .one .wz{

    font-size: 13px;

    padding: 0 20px;

    color: #737373;

    text-overflow: -o-ellipsis-lastline;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    line-clamp: 2;

    -webkit-box-orient: vertical;

}

.center .right .one .lists{

    font-size: 10px;

    color: #9C9C9C;

    align-items: center;

    padding: 10px 20px 20px 10px;

    justify-content: space-around;

    display: flex;

    visibility: hidden;

}

.center .right .one:hover .lists{

    visibility: visible;

}

.center .right .one .lists .item{

    float: left;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

}

.center .right .one .lists .item .dot{

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background-color: rgba(0,0,0,0.6);

    margin-right: 4px;

}

.center .right .one .btm{

    text-align: center;

    height: 100%;

    line-height: 1;

    font-size: 14px;

    letter-spacing: 1px;

    flex: 1;

    display: flex;

}

.center .right .one .btm .zuo{

    width: 170px;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #F5FAFD;

    color: #2469F3;

}

.center .right .one .btm .you{

    width: 91px;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #2469F3;

    color: #DFE6FD;

}

/*产品优势*/

.advantage{

    padding-bottom: 86px;

}

.adv-list{

    display: flex;

    align-items: center;

    justify-content: space-around;

    width: 1000px;

    margin-left: auto;

    margin-right: auto;

}

.adv-list .adv-item{

    width: 300px;

    height: 385px;

    position: relative;

    overflow: hidden;

}

.adv-list .adv-item .item-bg{

    width: 100%;

    height: 100%;

    -webkit-transition: all .25s ease-in-out;

    -o-transition: all .25s ease-in-out;

    transition: all .25s ease-in-out;

}

.adv-list .adv-item:hover .item-bg{

    -webkit-transform: scale(1.2);

    -ms-transform: scale(1.2);

    transform: scale(1.2);

}

.adv-list .adv-item .mask{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

}

.adv-list .adv-item:hover{

    cursor: pointer;

    box-shadow: #545454 0 0 25px;

}

.adv-list .adv-item .desc{

    position: absolute;

    width: 100%;

    left: 0;

    bottom: 0;

    padding: 0 10px 30px 30px;

    z-index: 4;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    overflow: hidden;

    -webkit-transform: translateY(20px);

    -ms-transform: translateY(20px);

    transform: translateY(20px);

    -webkit-transition: all .35s;

    -o-transition: all .35s;

    transition: all .35s;

}

.adv-list .adv-item:hover .desc{

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

}

.adv-list .adv-item .desc .title{

    padding-bottom: 16px;

    padding-right: 32px;

    font-size: 22px;

    letter-spacing: 1px;

    line-height: 1;

    color: #fff;

    font-weight: bold;

    background-position: right top;

}

.adv-list .adv-item .desc .title .iconfont{

    visibility: hidden;

    font-size: 22px;

    font-weight: 300;

    transition: all .2s ease-in-out;

}

.adv-list .adv-item:hover .desc .title .iconfont{

    visibility: visible;

}

.adv-list .adv-item .desc .adv-line{

    position: relative;

    left: 0;

    bottom: 0;

    width: 52px;

    height: 4px;

    background-color: #0ff;

}

.adv-list .adv-item .desc .text{

    color: #fff;

    font-size: 14px;

    opacity: 0;

    height: 0;

    margin-top: 20px;

    -webkit-transform: translateY(100%);

    -ms-transform: translateY(100%);

    transform: translateY(100%);

    -webkit-transition: all .35s;

    -o-transition: all .35s;

    transition: all .35s;

}

.adv-list .adv-item:hover .desc .text{

    opacity: 1;

    height: 18px;

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

}

/*技术保证*/

.science{

    background-color: #F9F9F9;

    padding-bottom: 86px;

}

.science:hover{

    cursor: pointer;

}

.sci-page{

    display: flex;

    align-items: center;

    justify-content: flex-end;

    width: 1000px;

    margin-left: auto;

    margin-right: auto;

    position: relative;

}

.sci-page .sci-left{

    width: 250px;

    position: absolute;

    left: 0;

}

.sci-page .sci-left .sort{

    width: 100%;

    height: 90px;

    background-color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:20px 0;

    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);

    transition: all .2s ease-in-out;

    position: relative;

}

.sci-page .sci-left .sort:hover{

   width: 320px;

}

.sci-page .sci-left .sort:hover .agin-line{

    visibility: hidden;

}

.sci-page .sci-left .sort:hover .agin-line{

    width: 6px;

    height: 100%;

    background-color: #2469F3;

    position: absolute;

    left: 0;

    top: 0;

    visibility: visible;

}

.sci-page .sci-left .sort img{}

.sci-page .sci-left .sort span{

    font-size: 20px;

    font-weight: 600;

    color: #606266;

    margin-left: 35px;

}

.sci-right{

    width: 720px;

    height: 400px;

    background-color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: space-around;

    margin-left: 30px;

    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);

    transition: all .2s ease-in-out;

}

.sci-right .left-team{

}

.sci-right .left-team .team{

    display: flex;

    padding: 40px 10px;

}

.sci-right .left-team .team img{}

.sci-right .left-team .team .team-cont{

    margin-left: 25px;

}

.sci-right .left-team .team .team-cont .title{

    font-size: 18px;

    color: #606266;

    font-weight: 600;

}

.sci-right .left-team .team .team-cont .text{

    color: #606266;

    font-size: 14px;

    margin-top: 10px;

}



.sci-right .right-team{

}

.sci-right .right-team .team{

    display: flex;

    padding: 35px 10px;

}

.sci-right .right-team .team img{

    width: 59px;

    height: 45px;

    margin-top: 10px;

}

.sci-right .right-team .team .team-cont{

    margin-left: 25px;

}

.sci-right .right-team .team .team-cont .title{

    font-size: 18px;

    color: #606266;

    font-weight: 600;

}

.sci-right .right-team .team .team-cont .text{

    color: #606266;

    font-size: 14px;

    margin-top: 10px;

    width: 200px;

}

/*免费试用*/

.trial{

    display: flex;

    align-items: center;

    justify-content: space-around;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

}

.trial .free{

    width: 100%;

    height: 276px;

    position: relative;

    overflow: hidden;

}

.trial .free .free-bg{

    width: 100%;

    height: 100%;

}

.trial .free .msk{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.2);

}

.trial .free .desc{

    position: absolute;

    right: 0;

    left: 0;

    bottom: 15%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-direction: column;

    z-index: 4;

}

.trial .free .desc .title{

    font-size: 35px;

    color: #FFFFFF;

    font-weight: bold;

    margin-top: 65px;

}

.trial .text{

    font-size: 16px;

    color: #FFFFFF;

    margin-top: 27px;

}

.trial .bottom{

    background: url(../img/圆角.png) no-repeat center;

    width: 154px;

    height: 42px;

    font-size: 20px;

    color: #FFFFFF;

    border-radius: 40px;

    border-color: #4984F0;

    text-align: center;

    line-height: 40px;

    margin-top: 52px;

}
.trial .bottom:hover{

    cursor: pointer;

}

/*新闻资讯*/

.news{

    padding-bottom: 86px;

}

.news:hover{

    cursor: pointer;

}

.news .news-list{

    width: 1000px;

    height: 430px;

    padding: 50px;

    border: 1px solid #D9DADD;

    margin-left: auto;

    margin-right: auto;

}

.news .news-list .on-news{

    display: flex;

    align-items: center;

    justify-content: space-around;

    width: 1000px;

    margin-left: auto;

    margin-right: auto;

}

.news .news-list .on-news .news-item{

    width: 370px;

    height: 325px;

}

.news .news-list .on-news .news-item .title{

    font-size: 18px;

    font-weight: bold;

    color: #303133;

}

.news .news-list .on-news .news-item .news-bk{

    width: 360px;

    height: 240px;

}

.news .news-list .on-news .news-item img{

    width: 100%;

    height: 100%;

    margin-top: 20px;

}

.news-list .on-news .news-itemtwo{

    width: 280px;

    height: 260px;

    font-size: 14px;

    color: #606266;

    line-height: 30px;

    position: relative;

    margin-left: 25px;

}

.news-list .on-news .news-itemtwo .text{

}

.news-list .on-news .news-itemtwo .gd{

    position: absolute;

    left: 170px;

    bottom: 0;

    color: #2469f3;

}

.news-list .on-news{}

.news-list .on-news .news-itemthere{

    width: 370px;

    height: 325px;

}

.news-list .on-news .news-itemthere .title{

    font-size: 18px;

    font-weight: bold;

    color: #303133;

}

.news-list .on-news .news-itemthere .news-bk{

    width: 360px;

    height: 136px;

}

.news-list .on-news .news-itemthere .news-bk img{

    width: 100%;

    height: 100%;

    margin-top: 20px;

}

.news-list .on-news .news-itemthere .news-p{

    font-size: 14px;

    color: #606266;

    line-height: 30px;

    position: relative;

    margin-top: 20px;

}

.news-list .on-news .news-itemthere .news-p .gd{

    position: absolute;

    left: 310px;

    bottom: 0;

    color: #2469f3;

    line-height: 1px;

}

.news-list .news-line{

    border-bottom: 1px solid #D9DADD;

    width: 980px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    margin-right: auto;

    margin-top: 20px;

}

.news-list .up-news{

    text-align: center;

    margin-top: 40px;

}

.news-list .up-news .news-itemes{

    width: 1000px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-left: auto;

    margin-right: auto;

}

.news-list .up-news .one{

    font-size: 18px;

    font-weight: bold;

}

.news-list .up-news .txt{

    font-size: 14px;

    color: #606266;

}

.news-list .up-news .txt span{

    margin-left: 20px;

}

.news-list .up-news .gd{

    color: #2469f3;

}

/*合作伙伴*/

.partner{
    background: url(../img/hzhb.png) no-repeat center;

    background-color: #F9F9F9;

    background-size: cover;

    padding-bottom: 86px;

}

.container-list{

    width: 1000px;

    height: auto;

    margin-left: auto;

    margin-right: auto;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    flex-wrap: wrap;

    border-left: 1px solid rgb(200, 200, 200);

    border-top: 1px solid rgb(200, 200, 200);
}

.container-list .container{

    width: 199px;

    height: 125px;

    perspective: 1000px;

    transform-style: preserve-3d;

    border-bottom: 1px solid rgb(200, 200, 200);

    border-right: 1px solid rgb(200, 200, 200);

}

.container-list .container .front .back{

    width: 100%;

    height: 100%;

}

.front img{

    width: 100%;

    height: 100%;

}

.back{

    width: 100%;

    height: 100%;

    background-color: rgba(31, 63, 205, 1);

    color: #fff;

    font-size: 16px;

    text-align: center;

}

.back span{

}

.flip{

    width: 100%;

    height: 100%;

    position: relative;

    transition: 0.6s;

    transform-style: preserve-3d;

}

.front, .back{

    position: absolute;

    top: 0px;

    left: 0px;

    backface-visibility: hidden;

    display: flex;

    height: 100%;

    align-items: center;

    justify-content: center;

}

.front{

    z-index: 2;

}

.back{

    transform: rotateY(-180deg);

}

.container:hover .flip{

    transform: rotateY(180deg);

    cursor: pointer;

}



/*备案及公司信息*/

.record{

    /*margin-top: 86px;*/

}

.record .record-friend{

    width: 100%;

    height: 80px;

    background-color: #3048A7;

    display: flex;

    align-items: center;

    justify-content: center;

}

.record .record-friend:hover{

    cursor: pointer;

}

.record .record-friend span{

    font-size: 14px;

    color: #FFFFFF;

}

.record .record-firm{

    width: 100%;

    height: 300px;

    background-color: #1D2D69;

    display: flex;

    align-items: center;

    justify-content: center;

}

.record .record-firm:hover{

    cursor: pointer;

}

.record .record-firm .rec{

    width: 1000px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-left: auto;

    margin-right: auto;

}

.record .record-firm .left-record{

}

.record .record-firm .left-record .baidu{

    width: 146px;

    height: 50px;

    display: block;

}

.record .record-firm .left-record .baidu img{

    width: 100%;

    height: 100%;

}

.record .record-firm .left-record .content{

    margin-top: 10px;

}

.record .record-firm .left-record .content .title{

    font-size: 18px;

    color: #FFFFFF;

}

.record .record-firm .left-record .content .contact{

    font-size: 14px;

    color: #FFFFFF;

    line-height: 30px;

    margin-top: 20px;

}

.record .record-firm .left-record .content .contact .dz{}

.record .record-firm .left-record .content .contact .dh{}

.record .record-firm .left-record .content .contact .dh span{

    color: #EE7E2B;

}

.record .record-firm .left-record .content .contact .ah{}

.record .record-firm .right-record{

    margin-top: 30px;

}

.record .record-firm .right-record .gzh{

    width: 126px;

    height: 123px;

}

.record .record-firm .right-record .gzh img{

    width: 100%;

    height: 100%;

}

.record .record-firm .right-record .wz{

    font-size: 16px;

    color: #FFFFFF;

    text-align: center;

    margin-top: 26px;

}

/*客服导航*/

.service{

    position: fixed;

    top: 50%;

    right: 0;

    z-index: 3;

}

.service .service-list{

    width: 272px;

    height: auto;

    justify-content: space-between;

    position: absolute;

    right: 18px;

    top: -50%;

    display: none;

}

.ser-consult{

    /*display: none;*/

}

.ser-list{

    display: flex;

    flex-direction: column;

}

.service .service-list .consult{

    width: 100%;

    height: auto;

    background-color: #FFFFFF;

    box-shadow: #909399 0 0 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-direction: column;

    line-height: 15px;

    margin-right: 20px;

}

.service .service-list .consult .consult-title{

    font-size: 14px;

    color: #545454;

    margin-top: 12px;

}

.service .service-list .consult .line{

    width: 200px;

    border-bottom: 1px solid #EDEFF2;

    margin-top: 10px;

}

.service .service-list .consult .phone{

    font-size: 12px;

    color: #545454;

}

.service .service-list .consult .online{

    font-size: 12px;

    color: #545454;

}

.service .service-list .consult .line-two{

    width: 168px;

    border: 1px solid #EDEFF2;

}

.service .service-list .consult .qq{

    font-size: 12px;

    color: #545454;

}

.service .service-list .consult .code{

    width: 106px;

    height: 104px;

}

.service .service-list .consult .code img{

    width: 100%;

    height: 100%;

}

.service .service-list .ser-list{

    right: 0;

}

.service .ser-list .ser-item{

    width: 61px;

    height: 62px;

    background-color: #2469F3;

    display: flex;

    align-items: center;

    justify-content: center;

}

.service .ser-list .ser-item:hover{

    cursor: pointer;

}

.service .ser-item img{

    color: #FFFFFF;

}

.service .ser-list .ser-items{

    width: 61px;

    height: 62px;

    background-color: #EDEFF2;

    display: flex;

    align-items: center;

    justify-content: center;

}

.service .ser-list .ser-items img{}

.service .ser-list .ser-items:hover{

    color: #2469F3;

    cursor: pointer;

}

.service .service-list .consult .piece{

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 5px;

    padding: 10px;

    width: 200px;

    box-sizing: border-box;

    border-bottom: 1px solid #EDEFF2;

}

.service .service-list .consult .piece .left{

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}

.service .service-list .consult .piece .left:hover{

    box-shadow: none;

}

.service .service-list .consult .piece .right{

    width: 30px;

    position: relative;

}

.service .service-list .consult .piece .img{

    width: 40px;

    height: 40px;

    margin: 0 10px 0 0;

}

.service .service-list .consult .piece .img img{

    width: 100%;

    height: 100%;

    border-radius: 20px;

}

.service .service-list .consult .piece .title{

    font-size: 12px;

    color: #545454;

    margin-right: 25px;

}

.service .service-list .consult .piece .title .rx{

    font-weight: bold;

}

.service .service-list .consult .piece .title .hm{

    margin-top: 5px;

}

.service .service-list .consult .piece .ewm-icon{

    width: 100%;

    height: auto;

    cursor: pointer;

}

.service .service-list .consult .piece .ewm-icon img{

    width: 100%;

    height: 100%;

}

.service .service-list .consult .piece .ewm{

    display: none;

    position: absolute;

    bottom: 36px;

    right: -40px;

    width: 120px;

    height: 120px;

    border: 2px solid #FFFFFF;

    border-radius: 4px;

    background-color: #FFFFFF;

    box-shadow: rgb(17 12 46 / 15%) 0px 48px 100px 0px;

}

.service .service-list .consult .piece .ewm img{

    width: 100%;

    height: 100%;

}

.service .service-list .consult .piece .ewm-icon:hover~.ewm {

    display: block;

}

.qucik-link a {

    color: #FFFFFF;

    font-size: 14px;

    margin-right: 14px;

}